import { useMemo, useRef, useState } from 'react';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, message, Upload } from 'antd';
import { useRequest } from 'ahooks';
import { uploadCourse, getCourse } from '@/services/supervisionApi';
import { request, useModel } from '@umijs/max';
import ExcelFileUpload from './comment/uploadExcel';
import ColumnGroup from 'antd/es/table/ColumnGroup';

// 定义数据类型
interface uploadCourseData {
    id: number;
    collegeDepartment: string;
    classNumber: string;
    scheduledStudents: number;
    selectedStudents: number;
    courseOfferingUnit: string;
    courseName: string;
    instructor: string;
    classTime: string;
    classroomLocation: string;
    classWeek: string;
    dayOfWeek: number;
}

interface uploadCourseFileResponseType {
    data: {
        list: uploadCourseData[];
    };
    xhr: {}
}

export default function SupervisionCoursePage() {
    const { initialState } = useModel('@@initialState');

    const getCourseData = useRequest(getCourse, {
        manual: true, // 关闭自动请求
        onSuccess: (data: uploadCourseData) => {
            console.log("data", data);

            // 重新加载表格
            actionRef.current?.reload();
            return data;
        },
    });

    const uploadCourseFile = useRequest(uploadCourse, {
        manual: true,
        onSuccess: (data: any) => {
            console.log("Success >>> ", data);
            // 重新加载表格
            actionRef.current?.reload();
        },
        onError: (err: any) => {
            console.log("uploadCourseFile Error >>> ", err);
        }
    });

    const customRequest = (options: any) => {
        const { file, onSuccess, onError } = options;
        console.log("file>>>", file);

        // uploadCourseFile.run(file).then(onSuccess).catch(onError);

        const result = uploadCourseFile.run(file)

        console.log("uploadCourseFile.run(file)>>", result);

    };

    const columns = useMemo<ProColumns[]>(
        () => [
            {
                title: '上课院系',
                dataIndex: 'collegeDepartment',
                key: 'college',
                hideInSearch: true,
            },
            {
                title: "上课地点",
                dataIndex: 'classroomLocation',
                copyable: true,
                key: 'address',
            },
            {
                title: '上课班级',
                dataIndex: 'classNumber',
                width: 270,
                copyable: true,
                key: 'class',
            },
            {
                title: '排课人数',
                dataIndex: 'scheduledStudents',
                key: 'arrangeCourse',
                copyable: true,
                hideInSearch: true,
            },
            {
                title: '选课人数',
                dataIndex: 'selectedStudents',
                key: 'selectCourse',
                hideInSearch: true,
            },
            {
                title: "开课单位",
                dataIndex: 'courseOfferingUnit',
                key: 'unit',
                hideInSearch: true,
            },
            {
                title: "开课课程",
                dataIndex: 'courseName',
                key: 'course',
                copyable: true,
            },
            {
                title: "授课教师",
                dataIndex: 'instructor',
                key: 'teacher',
                width: 100,
                copyable: true,
            },
            {
                title: "开课时间",
                dataIndex: 'classTime',
                key: 'time',
                renderText: (val) => `第${String(val).split(' ')[1]}`,
                filters: [
                    { text: '第一大节', value: '1' },
                    { text: '第二大节', value: '3' },
                    { text: '第三大节', value: '5' },
                    { text: '第四大节', value: '7' },
                    { text: '第五大节', value: '9' },
                ],
                onFilter: (value, record) => {
                    console.log(record.classTime, String(record.classTime).split(' ')[1][0], String(record.classTime).split(' ')[1][0].includes(String(value)))
                    return `第${String(record.classTime).split(' ')[1]}`.includes(String(value))
                },
            },
            {
                title: "上课周次",
                dataIndex: 'classWeek',
                key: 'selectWeek',
                hideInSearch: true,
            },
            {
                title: "星期",
                dataIndex: 'dayOfWeek',
                key: 'week',
                // 添加筛选功能
                sorter: (a, b) => a.dayOfWeek - b.dayOfWeek,
                filters: [
                    { text: '周一', value: '1' },
                    { text: '周二', value: '2' },
                    { text: '周三', value: '3' },
                    { text: '周四', value: '4' },
                    { text: '周五', value: '5' },
                    { text: '周六', value: '6' },
                    { text: '周日', value: '7' },
                ],
                onFilter: (value, record) => {
                    return record.dayOfWeek === value
                },
            },
        ],
        [getCourseData.loading],
    );

    const actionRef = useRef<ActionType>();

    return (
        <PageContainer title="课程管理">
            <ProTable
                columns={columns}
                actionRef={actionRef}
                rowKey="id"
                options={{ fullScreen: true, density: true, setting: true }}
                request={
                    (params, sort) => {
                        console.log("params>>>", params, "sort>>>", sort);
                        const result = getCourse();
                        console.log("result>>>", result);

                        return result
                    }
                }
                toolBarRender={() => [
                    <>
                    <ExcelFileUpload
                        // action='http://127.0.0.1:3000/course/upload'
                        // headers={{ Authorization: `Bearer ${initialState?.currentUser?.token}` }}
                        onUploadSuccess={(data: any) => {
                            actionRef.current?.reload();
                        }}
                        onUploadError={(data: any) => {
                            console.log("ExcelFileUploadError >>> ", data);
                        }}
                    />
                    <Button> 自动导入新课表</Button>
                    </>

                    
                ]}
            />
        </PageContainer>
    );

}

